<!-- 首页 -->
<template>
    <div class="common-layout">
        <el-container class="container">
            <!-- 左边导航栏 -->
            <div class="container-left" :class="[isCollapse ? 'closeMenu' : 'openMenu', value2 ? 'isDarkMenu' : '']">
                <!-- 导航栏组件 -->
                <My-Menu :isCollapse="isCollapse" :isDark="value2"></My-Menu>
            </div>
            <!-- 右边内容区域 -->
            <el-container class="container-right">
                <!-- 内容区头部 -->
                <el-header :class="['container-right-header', value2 ? 'isDarkHead' : '']">
                    <div class="header-up">
                        <div class="header-up-left">
                            <!-- 控制左侧导航栏缩放按钮 -->
                            <el-button type="danger" plain>
                                <el-icon size="25" v-if="!isCollapse" @click="isCollapse = true">
                                    <Fold />
                                </el-icon>
                                <el-icon size="25" v-else @click="isCollapse = false">
                                    <Expand />
                                </el-icon>
                            </el-button>
                        </div>
                        <div class="header-up-right">
                            <!-- 顶部刷新按钮 -->
                            <el-icon size="25" :class="[isRefresh ? 'animate-spin' : '',]" @click="changeRefresh">
                                <Refresh />
                            </el-icon>
                            <!-- 全屏按钮 -->
                            <el-icon @click="toggle" size="22" class="ml-2">
                                <component :is="isFullscreen ? 'Aim' : 'FullScreen'"></component>
                            </el-icon>
                            <!-- 暗黑模式 -->
                            <el-switch v-model="value2" class="mt-2" @change="toggleDark" @click="toggleLight"
                                style="margin-left: 10px;margin-top: 0px;--el-switch-on-color:#000; --el-switch-off-color: #999"
                                inline-prompt :active-icon="Moon" :inactive-icon="Sunny" size="large" />
                            <!-- 小铃铛 -->
                            <el-badge is-dot class="item">
                                <el-icon :icon="Share" size="22" class="ml-2">
                                    <Bell />
                                </el-icon>
                            </el-badge>
                            <!-- 退出登陆 -->
                            <el-dropdown :hide-on-click="false" class="cursor-pointer">
                                <span class="el-dropdown-link">
                                    <span>{{ user.userName || '未登录' }}</span>
                                    <el-icon class="el-icon--right"><arrow-down /></el-icon>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item>邮箱:{{ user.userEmail || '未设置' }}</el-dropdown-item>
                                        <el-dropdown-item @click="drawer2 = true">设置</el-dropdown-item>
                                        <el-dropdown-item @click="loginOut">退出</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>

                </el-header>
                <!-- 内容区 -->
                <div class="main-box">
                    <!-- 面包头皮屑 -->
                    <div :class="['container-right-breadcrumb', value2 ? 'isDarkTab' : '']">
                        <MyRouterTab></MyRouterTab>
                    </div>
                    <el-main class="container-right-main">
                        <router-view v-slot="{ Component }">
                            <transition name="fade" mode="out-in">
                                <component :is="Component" />
                            </transition>
                        </router-view>
                    </el-main>
                </div>
            </el-container>
        </el-container>
        <!-- 抽屉 -->
        <el-drawer v-model="drawer2" :direction="direction">
            <template #header>
                <h4>设置主题</h4>
            </template>
            <template #default>
                <div>
                    <span class="mr-5">选择颜色</span>
                    <el-color-picker v-model="color" show-alpha :predefine="predefineColors" @change="changeColor" />
                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="cancelClick">取消</el-button>
                    <el-button type="primary" @click="confirmClick">确定</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import router from '../router';
import MyMenu from '../components/My-Menu.vue';
import MyRouterTab from '../components/My-RouterTab.vue';
import { Share, Sunny, Moon } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
// import { useDark, useToggle, useFullscreen } from '@vueuse/core'//vueUse引入的暗黑模式
import { useFullscreen } from '@vueuse/core'
// import api from '../api/index'
import { resetRoouter } from '../router/index'
import { useStore } from '../store/index'
const userPinia = useStore()//获取pinia实例

//在pinia里获取登陆用户信息
const user = userPinia.userInfo


//侧边栏折叠控制按钮
const isCollapse = ref(false)

//刷新
const isRefresh = ref(false)
const changeRefresh = () => {
    isRefresh.value = !isRefresh.value;
    // 假设需要做一些操作来实现刷新，如重新获取数据
    setTimeout(() => {
        isRefresh.value = false;
        // 刷新当前页面
        window.location.reload();
    }, 1000) // 假设刷新1秒钟
}

//全屏
const { isFullscreen, toggle } = useFullscreen()

// 暗黑模式
// const isDark = useDark()
// const toggleDark = useToggle(isDark)
// const value2 = ref(localStorage.getItem('darkMode') === 'true')//暗黑开关
//watch监听设置本地存储
// watch(value2, (newVal: any) => {
//     localStorage.setItem('darkMode', newVal)
//     // if (newVal) {
//     //     toggleDark(newVal)
//     // }
// }, { immediate: true })


//新款暗黑模式
const value2 = ref(false)//暗黑开关
let newClientX = ref()//X轴坐标
let newClientY = ref()//Y轴坐标
//按钮点击事件(获取坐标)
const toggleLight = (e: any) => {
    newClientX.value = e.clientX//点击时候的X坐标
    newClientY.value = e.clientY//点击时候的Y坐标
}
//按钮改变事件
const toggleDark = (e: any) => {
    //@ts-ignore
    const transition = document.startViewTransition(() => {//startViewTransition()方法用于创建一个平滑的过渡效果
        if (e) {
            document.documentElement.classList.add('dark')//添加dark类名
        } else {
            document.documentElement.classList.remove('dark')//移除dark类名
        }
    })
    //document.startViewTransition().ready返回一个布尔值，表示是否成功启动了过渡效果。如果浏览器不支持该特性，则返回false。
    transition.ready.then(() => {
        //Math.hypot()数学函数，用于计算直角三角形的斜边长度(为了求出半径)
        const redius = Math.hypot(
            Math.max(newClientX.value, window.innerWidth - newClientX.value),//计算X轴坐标距离左右屏幕的俩个值 Math.max返回最大值
            Math.max(newClientY.value, window.innerHeight - newClientY.value)//计算y轴坐标距离上下屏幕的俩个值 Math.max返回最大值
        )
        //判断是否为暗黑模式
        const isDark = document.documentElement.classList.contains("dark")
        //绘制圆形过程的数组
        const clipPath = [
            `circle(0px at ${newClientX.value}px ${newClientY.value}px)`,//绘制圆形，半径为0，圆心在点击位置
            `circle(${redius}px at ${newClientX.value}px ${newClientY.value}px)`,//绘制圆形，半径为redius，圆心在点击位置
        ]
        //创建动画效果  第一个参数为关键帧,第二个参数为动画配置
        document.documentElement.animate(
            { clipPath: isDark ? clipPath.reverse() : clipPath },
            { duration: 500, pseudoElement: isDark ? '::view-transition-old(root)' : '::view-transition-new(root)' }
        )
    })
}


// (设置)抽屉
const drawer2 = ref(false)
const direction = ref('rtl')
// 取色器
const color = ref('rgba(255, 69, 0, 0.68)')
// 颜色列表
const predefineColors = ref([
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)',
    '#c7158577',
])
// 修改主体色 e为选择的颜色
const changeColor = (e: any) => {
    // document.documentElement 是全局变量时
    const el = document.documentElement
    // const el = document.getElementById('xxx')
    // 获取 css 变量
    getComputedStyle(el).getPropertyValue(`--el-color-primary`)
    // 设置 css 变量
    el.style.setProperty('--el-color-primary', e)
}
// 取消按钮
const cancelClick = () => {
    drawer2.value = false
}
// 确认按钮
const confirmClick = () => {
    ElMessageBox.confirm(`确定要关闭吗?`)
        .then(() => {
            drawer2.value = false
        })
        .catch(() => {
            // catch error
        })
}

// 退出登陆
const loginOut = () => {
    //清除token
    userPinia.clearUserInfo()
    //清除菜单
    localStorage.removeItem('editableTabs')
    //重置路由
    resetRoouter()
    //添加路由WelcomeAd
    router.addRoute({
        name: 'HomeView',
        path: '/',
        redirect: 'login',
        component: () => import('../views/HomeView.vue'),
        children: [
            {
                name: 'WelcomeAd',
                path: '/welcome',
                meta: { title: '首页' }, // 路由元信息
                component: () => import('../views/ChlidPage/WelcomeAd.vue')
            }
        ]
    })
    ElMessage.success('退出成功')
    router.push('/login')
}

</script>

<style scoped lang="less">
.common-layout {
    .container {
        display: flex;
        min-width: 100vw;

        .container-left {
            width: 240px;
            max-height: 100vh;
            background-color: #f2eada;
            // max-height: 100vh;
            // height: 100%;
            overflow: hidden;
            //阴影
            box-shadow: 5px 0 15px rgba(0, 0, 0, 0.463);
        }

        .container-right {
            .container-right-header {
                // background-color: #7f7f7f;
                background: linear-gradient(120deg, #e0c3fc, #8ec5fc 100%);
                transition: background .5s ease-in-out;
                // color: #fff;
                display: flex;
                align-items: center;

                // margin-bottom: 10px;
                .header-up {
                    flex: 1;
                    display: flex;
                    // align-items: center;
                    justify-content: space-between;
                    padding-right: 20px;
                    box-sizing: border-box;

                    .header-up-left {
                        cursor: pointer;
                    }

                    .header-up-right {
                        display: flex;
                        align-items: center;
                    }
                }


            }
        }

        .container-right-main {
            // background-color: #f9fafc;
            color: #303133;
            margin-top: 40px;
        }
    }
}

:deep(.el-tabs__nav-scroll) {
    margin-bottom: -1px;
}

.main-box {
    position: relative;
    height: calc(100vh - 60px);
    //超出高度自动生成滚动条
    overflow-y: auto;
    padding-bottom: 20px;
    box-sizing: border-box;

}

.item {
    margin-top: 10px;
    margin-right: 40px;
}

.example-showcase .el-dropdown+.el-dropdown {
    margin-left: 15px;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.container-right-breadcrumb {
    width: 100%;
    // height: 40px;
    position: fixed;
    z-index: 999;
    background-color: #fff;
    // opacity: 1;
    transition: all 0.5s;
}

.isDarkTab {
    background-color: #121212;
    color: #fff;
}

.isDarkHead {
    // background-image: none !important;
    background: linear-gradient(120deg, #000000, #0c0c0c 100%) !important;
    background-color: #000 !important;
    transition: all 0.5s;
    transition: background .5s ease-in-out;
}

.isDarkMenu {
    background-color: #202124 !important;
    transition: all 0.5s;
}

.closeMenu {
    width: 64px !important;
    transition: width 0.5s;
}

.openMenu {
    width: 240px !important;
    background-color: #f2eada !important;
    transition: width 0.5s;
}

:deep(.el-tabs__header) {
    margin: 0 !important;
    //阴影
    box-shadow: 7px 5px 10px rgba(0, 0, 0, 0.463);
}


//组件动画
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

//下拉菜单bug
:deep(:focus-visible) {
    outline: none;
}
</style>